<template>
  <n-grid :cols="2" style="height:calc(100vh - 30px);" x-gap="12">
    <n-gi style="height:calc(100vh - 30px);">
      <n-spin :show="show">
        <div style="height:35px;width:100%;">
          <n-button dashed ghost round type="primary" @click="selectFolderMp4Old">
            <template #icon>
              <n-icon>
                <Duplicate />
              </n-icon>
            </template>
            原始数据
          </n-button>
          {{ filesPathOld }}
          <n-button v-if="filesPathOld!=''" dashed ghost round style="float:right" type="primary"
                    @click="JetDecode.getMp4FilesInfoOld">
            <template #icon>
              <n-icon>
                <GitCompareSharp />
              </n-icon>
            </template>
            刷新
          </n-button>
        </div>
        <!--        原始数据-->
        <n-scrollbar style="max-height: calc(100vh - 70px);height:calc(100vh - 70px);width:100%;">
          <n-list clickable hoverable>
            <n-list-item v-for="(fileOld,index) in filesListMp4Old">
              <template #prefix>
<!--                <n-button size="small">{{ index + 1 }}</n-button>-->
                <n-image
                  width="100"
                  :src="fileOld.path"
                  @click="AntCopyMsg(fileOld.path)"
                  :show-toolbar="false"
                />
              </template>
<!--              <template #suffix>-->
<!--                <n-checkbox value="Beijing" />-->
<!--              </template>-->
              <n-tooltip trigger="hover">
                <template #trigger>
                  <n-thing :title-extra="omit(fileOld.path,26)" content-style="margin-top: 10px;">
                    <template #description>
                      <n-space size="small" style="margin-top: 4px">
                        <n-tag :bordered="false" size="small" type="success">
                          {{ fileOld.size }} KB
                        </n-tag>
                        <n-tag :bordered="false" size="small" type="info">
                          {{ fileOld.creationTime }}
                        </n-tag>
                      </n-space>
                    </template>
                  </n-thing>
                </template>
                {{ fileOld.path }}
              </n-tooltip>
              <div style="width:100%;text-align:center;padding-top:10px;">
                <n-button ghost round size="tiny" type="success" @click="JetDecode.convertVideo(fileOld.path)">
                  <template #icon>
                    <n-icon>
                      <Cut />
                    </n-icon>
                  </template>
                  转换
                </n-button>
              </div>

            </n-list-item>
          </n-list>
        </n-scrollbar>
        <!--        原始数据-->
        <template #description>
          <div>
            加速解码中~~~~
          </div>
        </template>
      </n-spin>
    </n-gi>

    <n-gi style="height:calc(100vh - 30px);">
      <div style="height:35px;width:100%;">
        <n-button dashed ghost round type="info" @click="selectFolderMp4New">
          <template #icon>
            <n-icon>
              <Desktop />
            </n-icon>
          </template>
          存储目录
        </n-button>
        {{ filesPathNew }}
        <n-button v-if="filesPathOld!=''" dashed ghost round style="float:right" type="info"
                  @click="JetDecode.getMp4FilesInfoNow">
          <template #icon>
            <n-icon>
              <GitCompareSharp />
            </n-icon>
          </template>
          刷新
        </n-button>
      </div>
      <n-scrollbar style="max-height: calc(100vh - 70px);height:calc(100vh - 70px);width:100%;">
        <n-list clickable hoverable>
          <n-list-item v-for="fileNew in filesListMp4New">
            <template #suffix>
              <n-image
                width="100"
                :src="fileNew.path"
                @click="AntCopyMsg(fileNew.path)"
                :show-toolbar="false"
              />
            </template>

            <n-tooltip trigger="hover">
              <template #trigger>
                <n-thing :title="omit(fileNew.path,30)" content-style="margin-top: 10px;">
                  <template #description>
                    <n-space size="small" style="margin-top: 4px">
                      <n-tag :bordered="false" size="small" type="success">
                        {{ fileNew.size }} KB
                      </n-tag>
                      <n-tag :bordered="false" size="small" type="info">
                        {{ fileNew.creationTime }}
                      </n-tag>
                    </n-space>
                  </template>
                </n-thing>
              </template>
              {{ fileNew.path }}
            </n-tooltip>
          </n-list-item>
        </n-list>
      </n-scrollbar>
    </n-gi>

  </n-grid>
</template>
<script lang="ts" setup>
import { NButton } from 'naive-ui'
import { request } from "@/api/index.ts";
import { reactive, ref, onMounted } from 'vue'
import { ipcRenderer } from 'electron';
import { Cut, Desktop, Duplicate, GitCompareSharp } from '@vicons/ionicons5'
import { omit } from '@/utils/stringHelp.ts'
import { oops } from '@/utils/alertMsg.ts'
import { AntCopyMsg } from '@/utils/copyHelp.ts'

const show = ref<boolean>(false);

onMounted(() => {
  const stored1 = localStorage.getItem('filesPathOld');
  const stored2 = localStorage.getItem('filesPathNew');
  if (stored1) {
    filesPathOld.value = stored1
  }
  if (stored2) {
    filesPathNew.value = stored2
  }
});
// 解码
const JetDecode = reactive({
  convertVideo: async (path: string) => {
    show.value = true;
    let inputFile = path.replace(/\\\\/g, '\\');
    const res = await request({
      url: "/api/convertVideo",
      method: "get",
      data: {
        inputFile: inputFile,
        outputPath: filesPathNew.value
      }
    });
    console.log(res);
    if (res.code === 200) {
      oops("成功", res.message, "s")
      //刷新数据
      await JetDecode.getMp4FilesInfoOld();
      await JetDecode.getMp4FilesInfoNow();
    } else {
      oops("失败", res.message, "e")
    }
    show.value = false;

  },
  getMp4FilesInfoOld: async () => {
    console.log("getMp4FilesInfoOld");
    const res = await request({
      url: "/api/getMp4FilesInfoOld",
      method: "get",
      data: {
        folderPath: filesPathOld.value
      }
    });
    console.log(res);
    filesListMp4Old.value = res.data;
  },
  getMp4FilesInfoNow: async () => {
    const res = await request({
      url: "/api/getMp4FilesInfoNow",
      method: "get",
      data: {
        folderPath: filesPathNew.value
      }
    });
    console.log(res);
    filesListMp4New.value = res.data;
  }
})

//原始数据
const filesListMp4Old = ref<string[]>([]);
const filesPathOld = ref<string>("");
//获取原始媒体文件
const selectFolderMp4Old = async () => {
  const result = await ipcRenderer.invoke('select-Folder-Mp4-Old');
  console.log(result);
  if (result.path != "") {
    filesListMp4Old.value = result.data;
    filesPathOld.value = result.path;
    localStorage.setItem('filesPathOld', filesPathOld.value);
    if (filesPathNew.value == "") {
      filesPathNew.value = filesPathOld.value;
      localStorage.setItem('filesPathNew', filesPathNew.value);
    }
    await JetDecode.getMp4FilesInfoNow();
  }
};

// 解码后数据
const filesListMp4New = ref<string[]>([]);
const filesPathNew = ref<string>("");
const selectFolderMp4New = async () => {
  const result = await ipcRenderer.invoke('select-Folder-Mp4-Now');
  console.log(result);
  if (result.path != "") {
    filesListMp4New.value = result.data;
    filesPathNew.value = result.path;
    localStorage.setItem('filesPathNew', filesPathNew.value);
  }
};


</script>
<style scoped>
</style>